import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList, AtListItem, AtCurtain, AtToast, AtButton, AtFloatLayout, AtSwipeAction, AtIcon, AtInput, AtTag, AtActionSheet, AtActionSheetItem, AtImagePicker, AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui'
import './caseDetail.scss'
import reactMixin  from 'react-mixin'
import myJs from './caseDetailJs.js'
import app from '../../main.js'
import upload_image from '../../img/icon_jia.png'
import icon_delete from '../../img/icon_delete.png'

export default class CaseDetail extends Component {
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
    config = {
        navigationBarTitleText: '病历详情'
    }

    componentWillMount () {
        this.init();
    }

    componentDidShow(){
        this.getTags();
        this.getCase_detail();
        this.allCourse();
    }

    init() {
        this.state.case_detail.id = this.$router.params.id;
        // this.state.case_detail.id = 390;
        this.setState({
            case_detail: this.state.case_detail,
            isOpen1: true,
            isOpen2: true,
            isOpen3: true,
            isOpen4: false,
            isShare: false,
            text: '',
            isOpenImage: false,
            image: ''
        });
        this.getBaseTemplate();
    }

    showImage(image) {
        this.setState({
            isOpenImage: true,
            image: image
        })
    }

    closeImage() {
        this.setState({
            isOpenImage: false
        })
    }

    //调用api接口 get 某病历所打的标签
    getTags(){
        let me = this;
        let data = {
            id:me.state.case_detail.id
        }
        app.get('web/caselabel/case_labels',data,function(res){
            me.setState({
                getTags:res.data.result
            })
        })
    }

    handleClose() {
        this.setState({
            isOpen4: false,
        });
    }

    swipeClick(data, v) {
        if(v.text == '编辑') {
            this.gotoEdit('../createCourse/createCourse?id=' + data.id + '&type=' + data.type);
        } else if(v.text == '删除') {
            this.deleteCourse(data.id);
        }
    }

    addCourse() {
        this.setState({
            isOpen4: true,
        });
    }

    toAddCourse(type, case_template_id) {
        this.setState({
            isOpen4: false,
        });
        app.navigateTo("../createCourse/createCourse?case_id=" + this.state.case_detail.id + "&type=" + type + '&course_name=' + type + '&case_template_id=' + case_template_id);
    }

    openPanel(name) {
        this.state[name] = !this.state[name];
        this.setState({
            name: this.state[name]
        });
    }

    onChange = e => {
        this.setState({
            sexChecked: this.state.sexRang[e.detail.value]
        })
    }

    onMarryChange = e => {
        this.setState({
            marryChecked: this.state.marryRang[e.detail.value]
        })
    }

    onDateChange = e => {
        this.setState({
            dateChecked: e.detail.value
        })
    }

    onCityChange = e => {
        this.setState({
            cityChecked: this.state.cityRang[0][e.detail.value[0]] + this.state.cityRang[1][e.detail.value[1]]
        })
    }

    showToast(text) {
        this.setState({
            message: text,
            isOpened: true
        });
    }

    toastClose() {
        this.setState({
            isOpened: false
        });
    }

    gotoEdit(url) {
        var me = this;
        if(!me.state.editable && me.state.case_detail.type == '病例') {
            console.log('不可编辑');
            return;
        }
        app.navigateTo(url);
    }
    taghandleClick(){
        let id = this.state.case_detail.id;
        app.navigateTo('../medical/medical?id='+id)
    }
    toastClick(){
        app.navigateTo('../medicalStatus/medicalStatus')
    }
    statusClick(){
        let id = this.state.case_detail.id;
        app.navigateTo('../medicalStatus/medicalStatus?id='+id);
    }
    toCooperations() {
        app.navigateTo('../cooperations/cooperations?id='+this.state.case_detail.id);
    }
    openShare(v) {
        this.setState({
            isShare: v
        });
    }
    toshareDongTai() {
        app.toast('暂未开放');
    }
    // 微信转发
    onShareAppMessage(res) {
        if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return {
          title: '病历详情',
          path: 'pages/doctorpages/editCase/editCase?id=' + this.state.case_detail.id
        }
      }

    render () {
        console.log(1,this.state.case_courses)
        return (
            <View className='editCase'>
                <AtCurtain
                    isOpened={this.state.isOpenImage}
                    onClose={this.closeImage.bind(this)}
                >
                    <Image
                    style='width:100%;'
                    src={app.getPath(this.state.image)}
                    />
                </AtCurtain>
                <AtToast onClose={this.toastClose} hasMask={true} isOpened={this.state.isOpened} text={this.state.message} icon="alert-circle" onClick={this.toastClick} ></AtToast>
                <View className='top'>
                    <Image src={app.getPath('/img/logo.png')} mode='widthFix' style='width:70rpx;height:70rpx;'></Image>
                    <View className='top_txt'>爱眼医生 - 眼科医生的个人工作室</View>
                </View>

                <View className='doctorName'>当前病历为{this.state.case_detail.doctor_name}医生所分享</View>
                <AtList>
                    <AtListItem hasBorder={false} title={this.state.case_detail.doctor_name + ' ' + this.state.case_detail.department} note={this.state.case_detail.hospital} thumb='https://experts.bayou-tech.cn/images/default-user.png'/>
                </AtList>

                <View className='panel'>
                    <View className="header">
                        <Text className="txt">患者信息</Text>
                    </View>
                    <View>
                        <View className='base_item'>
                            <View className='base_label'>{this.state.case_detail.patient_name}, {this.state.case_detail.gender}, {this.state.case_detail.age}岁</View>
                            {/* <View className='base_value'>{this.state.case_detail.gender} {this.state.case_detail.age}</View> */}
                        </View>
                    </View>
                </View>

                {
                    this.state.template.map((item) => {
                        return item.type == '矩阵填空题' ? 
                        (
                            <View className='panel'>
                                <View className="header">
                                    <Text className="txt">{item.label}</Text>
                                    <View className="btns">
                                        <AtButton onClick={this.openPanel.bind(this, 'isOpen1')} type='secondary' size='small' className="btn">{this.state.isOpen1? '收起': '展开'}</AtButton>
                                    </View>
                                </View>
                                <View className={this.state.isOpen1 ? '': 'hidden'}>
                                {
                                    item.items.map((one) => {
                                        return <View className='base_item'>
                                                <View className='base_label'>{one.label}</View>
                                                <View className='base_value'>{this.state.case_detail[one.name]}</View>
                                            </View>
                                    })
                                }
                                </View>
                            </View>
                        ) : 
                        (item.type == '眼科检查' ? 
                        (
                            <View className='panel'>
                                <View className="header">
                                    <Text className="txt">{item.label}</Text>

                                    <View className="btns">
                                        <AtButton onClick={this.openPanel.bind(this, 'isOpen3')} type='secondary' size='small' className="btn">{this.state.isOpen3? '收起': '展开'}</AtButton>
                                    </View>
                                </View>
                                <View className={this.state.isOpen3 ? '': 'hidden'}>
                                    <View className='eye'>
                                        <View className='eye1'>项目</View>
                                        <View className='eye2'>右眼</View>
                                        <View className='eye3'>左眼</View>
                                    </View>
                                    {
                                        this.state.inspect_list.map((one) => {
                                            return (one.v1 != '' || one.v2 != '')
                                            &&
                                            <View className='eye_item'>
                                                    <View className='eye_value1'>{one.label}</View>
                                                    <View className='eye_value2'>{one.v2}</View>
                                                    <View className='eye_value3'>{one.v1}</View>
                                            </View>
                                        })
                                    }
                                </View>
                            </View>
                        ) : 
                        (item.type == '上传图片' ? 
                        (
                            <View className='panel'>
                                <View className="header">
                                    <Text className="txt">{item.label}</Text>
                                </View>
                                <View className='editCaseImage'>
                                    <AtModal isOpened={this.state.imgModal}>
                                        <AtModalHeader>请输入照片名称</AtModalHeader>
                                        <AtModalContent>
                                            <AtInput type='text' value={this.state.text} onChange={this.handleChange.bind(this, 'text')}/>
                                        </AtModalContent>
                                        <AtModalAction>
                                            <Button onClick={this.closeModal.bind(this)}>取消</Button> 
                                            <Button onClick={this.comfirmModal.bind(this)}>确定</Button>
                                        </AtModalAction>
                                    </AtModal>
                                    <View className="subject">
                                        {
                                            this.state.case_detail.physical_images.map((k) => {
                                                return <View className='item_box'>
                                                            <View className='item_img'><Image src={k.url} onClick={this.showImage.bind(this, k.url)} style='width:200rpx;height:200rpx;' mode='widthFix'></Image></View>
                                                            <View className='item_txt'>{k.text}</View>
                                                        </View>
                                            })
                                        }
                                    </View>
                                </View>
                            </View>
                        ) : (null)))
                    })
                }

                <View className='panel mg_bottom'>
                    <View className="header">
                        <Text className="txt">病程</Text>

                        <View className="btns">
                            <AtButton onClick={this.openPanel.bind(this, 'isOpen2')} type='secondary' size='small' className="btn">{this.state.isOpen2? '收起': '展开'}</AtButton>
                        </View>
                    </View>

                    <View className={this.state.isOpen2 ? '': 'hidden'}>
                        <AtList>
                            {
                                this.state.case_courses.map((item)=>{
                                    return (
                                        <AtSwipeAction onClick={this.swipeClick.bind(this, item)} options={[
                                            {
                                                text: '删除',
                                                style: {
                                                backgroundColor: '#FF4949'
                                                }
                                            }
                                            ]}>
                                            <AtListItem arrow='right' onClick={this.gotoEdit.bind(this, '../courseDetail/courseDetail?id=' + item.id + '&type=' + item.type + '&case_id=' + this.state.case_detail.id + '&course_name=' + item.name + '&case_template_id=' + item.case_template_id)} title={item.name} extraText={item.visit_at} />
                                        </AtSwipeAction>
                                    )
                                })
                            }
                        </AtList>
                    </View>
                </View>

                {/* 分享菜单 */}
                <AtActionSheet isOpened={this.state.isShare} cancelText='取消' title=''>
                    <AtActionSheetItem>
                        <Button open-type='share' plain className='btn_share_weixin'>分享至微信</Button>
                    </AtActionSheetItem>
                    <AtActionSheetItem onClick={this.toshareDongTai.bind(this)}>
                        分享至动态
                    </AtActionSheetItem>
                </AtActionSheet>

                <View className='empty'></View>
            </View>
        );
    }
}

reactMixin.onClass(CaseDetail, myJs);
